<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="120px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="字典编码:" prop="dictCode">
            <el-input
              v-model="state.formData.dictCode"
              :disabled="!state.operationAdd"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典项值:" prop="dictValue">
            <el-input
              v-model="state.formData.dictValue"
              :maxlength="20"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="字典项内容:" prop="dictText">
            <el-input
              v-model="state.formData.dictText"
              :maxlength="50"
              :show-word-limit="true"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否只读:" prop="isReadonly">
            <easy-dict-select
              ref="isReadonlyRef"
              :default-value="state.formData.isReadonly"
              dict-code="1008"
              show-all="N"
              @change="handlerIsReadonlyChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="排序号:" prop="orderId">
            <el-input v-model="state.formData.orderId" type="number" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="state.formData.remark"
              :maxlength="128"
              placeholder="请输入备注"
              :rows="4"
              :show-word-limit="true"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="save">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup name="DictEntryEdit">
import { useMessage } from "@/hooks/message";
import EasyDictSelect from "@/components/dictSelect.vue";
import { addDictEntry, updateDictEntry } from "@/api/admin/system/dict/";

const props = defineProps({
  title: {
    type: String,
    default: "字典项"
  },
  width: {
    type: String,
    default: "30%"
  },
  model: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(["confirm"]);

const formRef = ref(null);
const isReadonlyRef = ref(null);

const state = reactive({
  operationAdd: false,
  dialogTitle: props.title,
  dialogVisible: false,
  formData: {
    id: "",
    dictCode: "",
    dictValue: "",
    dictText: "",
    orderId: 0,
    remark: "",
    isReadonly: ""
  },
  formRules: {
    dictCode: [
      { required: true, message: "字典编码不能为空", trigger: "blur" }
    ],
    dictValue: [
      { required: true, message: "字典项值不能为空", trigger: "blur" }
    ],
    dictText: [
      { required: true, message: "字典项内容不能为空", trigger: "blur" }
    ],
    isReadonly: [
      { required: true, message: "是否只读不能为空", trigger: "blur" }
    ],
    orderId: [{ required: true, message: "排序号不能为空", trigger: "blur" }]
  }
});

const show = row => {
  if (row && row.id) {
    state.dialogTitle = `修改${props.title}`;
    state.operationAdd = false;
    state.formData.id = row.id;
    state.formData.dictCode = row.dictCode;
    state.formData.dictValue = row.dictValue;
    state.formData.dictText = row.dictText;
    state.formData.orderId = row.orderId;
    state.formData.remark = row.remark;
    state.formData.isReadonly = row.isReadonly;
  } else {
    state.formData.dictCode = row.dictCode;
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  state.dialogVisible = true;
};

const close = () => {
  state.operationAdd = false;
  state.formData.id = "";
  state.formData.dictCode = "";
  state.formData.dictValue = "";
  state.formData.dictText = "";
  state.formData.orderId = 0;
  state.formData.remark = "";
  state.formData.isReadonly = "";
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let data;
      if (state.operationAdd) {
        data = await addDictEntry(state.formData);
      } else {
        data = await updateDictEntry(state.formData);
      }
      if (data.code && data.code === 200) {
        useMessage().success(data.msg);
        emits("confirm", {});
        close();
      } else {
        useMessage().error(data.msg);
      }
    }
  });
};

const handlerIsReadonlyChange = val => {
  state.formData.isReadonly = val;
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped></style>
